const tbody=document.querySelector('tbody');
const addbtn=document.querySelector('.addbtn');
const province=document.querySelector('[name="province"]');
const city=document.querySelector('[name="city"]');
const county=document.querySelector('[name="county"]');
//取  模态框的元素
const nameEle=document.querySelector('[name="name"]');
const ageEle=document.querySelector('[name="age"]');
const groupEle=document.querySelector('[name="group"]');
const sexEles=document.querySelectorAll('[name="sex"]');
const phoneEle=document.querySelector('[name="phone"]');
const salaryEle=document.querySelector('[name="salary"]');
const truesalaryEle=document.querySelector('[name="truesalary"]');
// 模态框标题
const addModalLabel=document.querySelector('#addModalLabel')
const btnlog=document.querySelector('.btnlog');


let id;
// 根据数据渲染出结构
function init() {
    // 发请求拿数据
    axios({
        url:'/student/list'
    }).then(res=>{
        // console.log(res);
        //渲染页面
        let htmlStr=''
        res.data.data.forEach((value,index) => {
            htmlStr+=`<tr>
            <th scope="row">${index+1}</th>
            <td>${value.name}</td>
            <td>${value.age}</td>
            <td>${value.sex}</td>
            <td>${value.group}</td>
            <td>${value.phone}</td>
            <td>${value.salary}</td>
            <td>${value.truesalary}</td>
            <td>${value.province+value.city+value.county}</td>
            <td>
              <button type="button" class="btn btn-primary btn-sm btnelt" data-id="${value.id}">修改</button>
              <button type="button" class="btn btn-danger btn-sm btndle" data-id="${value.id}">删除</button>
            </td>
          </tr>`
        });
        tbody.innerHTML=htmlStr
    })
}
init();
// 省级联动 一下
// 省的渲染
axios({
    url:'/geo/province'
}).then(res=>{
    // console.log(res);
    // 渲染页面
    let htmlStr=`<option selected value="">--省--</option>`
    res.data.forEach(value=>{
        htmlStr+=`<option  value="${value}">${value}</option>`
    })
    province.innerHTML=htmlStr;
})

// 单击省份时  获得市的数据
province.addEventListener('change',function () {
    /// 这里他会分为两种值   有值和空值
    // console.log(province.value);
    if(province.value!==''){
        axios({
            url:'/geo/city',
            method:'GET',
            params:{ pname:province.value }
        }).then(res=>{
            // console.log(res);
            let htmlStr=`<option selected value="">--市--</option>`
            res.data.forEach(value=>{
                htmlStr+=`<option  value="${value}">${value}</option>`
            })
            city.innerHTML=htmlStr;
        })
    }else{
        city.innerHTML=`<option selected value="">--市--</option>`
        county.innerHTML=`<option selected value="">--县--</option>`
    }
})

// 单击市  时  渲染县
city.addEventListener('change',function () {
    // 收集数据
    // console.log(province.value );
    // console.log(city.value);
    //发请请求
    if(province.value&&city.value){
        axios({
            url:'/geo/county',
            method:'GET',
            params:{ pname:province.value ,
                cname:city.value}
        }).then(res=>{
            // console.log(res);
            // 渲染县
            let htmlStr=`<option selected value="">--县     --</option>`
                res.data.forEach(value=>{
                    htmlStr+=`<option  value="${value}">${value}</option>`
                })
                county.innerHTML=htmlStr;
        })
    }else{
        county.innerHTML=`<option selected value="">--县--</option>`

    }
    
})


// 引入  表单验证
function test() {
    return {
      fields: {
        name: {
          validators: {
            notEmpty: {
              message: '姓名不能为空',
            },
            stringLength: {
              min: 2,
              max: 10,
              message: '姓名长度2~10位'
            }
          }
        },
        age: {
          validators: {
            notEmpty: {
              message: '年龄不能为空',
            },
            greaterThan: {
              value: 18,
              message: '年龄不能小于18岁'
            },
            lessThan: {
              value: 60,
              message: '年龄不能超过60岁'
            }
          }
        },
        sex: {
          validators: {
            choice: {
              min: 1,
              max: 1,
              message: '请选择性别'
            }
          }
        },
        group: {
          validators: {
            notEmpty: {
              message: '组号不能为空',
            },
            regexp: {
              regexp: /^\d{1,2}$/,
              message: '请选择有效的组号'
            }
          }
        },
        phone: {
          validators: {
            notEmpty: {
              message: '手机号不能为空',
            },
            regexp: {
              regexp: /^1\d{10}$/,
              message: '请填写有效的手机号'
            }
          }
        },
        salary: {
          validators: {
            notEmpty: {
              message: '实际薪资不能为空',
            },
            greaterThan: {
              value: 800,
              message: '期望薪资不能低于800'
            },
            lessThan: {
              value: 100000,
              message: '期望薪资不能高于100000'
            }
          }
        },
        truesalary: {
          validators: {
            notEmpty: {
              message: '实际薪资不能为空',
            },
            greaterThan: {
              value: 800,
              message: '实际薪资不能低于800'
            },
            lessThan: {
              value: 100000,
              message: '实际薪资不能高于100000'
            }
          }
        },
        province: {
          validators: {
            notEmpty: {
              message: '省份必填',
            },
          }
        },
        city: {
          validators: {
            notEmpty: {
              message: '市必填',
            },
          }
        },
        county: {
          validators: {
            notEmpty: {
              message: '县必填',
            },
          }
        },
      }
    }
  }

// 添加学员 用js调出
addbtn.addEventListener('click',function () {
    // js 吊出模态框
    $('#addModal').modal('show');
    addModalLabel.innerHTML='录入新学员'
        btnlog.innerHTML='确认添加'
})
// 添加学员信息
$('#addModal form').bootstrapValidator(test()).on('success.form.bv', function(e) {
    e.preventDefault()
   //收集数据 
      const data={};
      let formdata=new FormData(document.querySelector('.add-form'))
      formdata.forEach((value,index)=>{
        //   console.log(value,index);
          data[index]=value;
      })
    //   console.log(data);

      if(addModalLabel.innerHTML=='录入新学员'){
           // 发送请求
        axios({
            url:'/student/add',
            method:'POST',
            data
        }).then(res=>{
            //   console.log(res);
            if(res.data.code==0){
                toastr.success('添加成功')
                // 关闭模态框
                $('#addModal').modal('hide');
                init()
            }if(res.data.message==500){
                toastr.warning('服务崩溃')
            }
        })
      }else{
        //   console.log(123);
        data.id=id;
        axios({
            url:'/student/update',
            method:'PUT',
            data
        }).then(res=>{
            // console.log(res);
            // 隐藏模态框
            $('#addModal').modal('hide');
            toastr.success('编辑成功')
            init()
        })
      }
})

// 删除   为tbody 添加事件委托
tbody.addEventListener('click',function (e) {
    if(e.target.classList.contains('btndle')){
        // console.log(123);
        id=e.target.dataset.id;
        // 发起请求
        axios({
            url:'/student/delete?id='+id,
            method:'DELETE'
        }).then(res=>{
            // console.log(res);
            toastr.success('删除学员成功')
            init();
        })
    }
})

// 修改学员
tbody.addEventListener('click',function (e) {
    if(e.target.classList.contains('btnelt')){
        $('#addModal').modal('show');
        // 修改模态框
        addModalLabel.innerHTML='编辑学员信息'
        btnlog.innerHTML='确认编辑'
        // 数据回填
        // 根据id 发请求
        id=e.target.dataset.id;
        axios({
            url:'/student/one?id='+id,
        }).then(res=>{
            // console.log(res);
            const  obj=res.data.data
            // 数据回填  ， 为每个input 框填值
            nameEle.value=obj.name
            ageEle.value=obj.age
            groupEle.value=obj.group
            obj.sex=='男' ? (sexEles[0].checked='true'):(sexEles[1].checked='true')
            phoneEle.value=obj.phone
            salaryEle.value=obj.salary
            truesalaryEle.value=obj.truesalary
            // 省份  的  回填
            province.value=obj.province
            city.innerHTML=`<option selected value="">${obj.city}</option>`
            county.innerHTML=`<option selected value="">${obj.county}</option>`
            let ev = document.createEvent('HtmlEvents')
            // ev.initEvent('事件类型',是否允许冒泡,是否允许阻止默认行为)
            ev.initEvent('change', true, true)
            // 元素.dispatchEvent(自定义事件对象)
            province.dispatchEvent(ev)
            setTimeout(()=>{
                city.value = obj.city
                let ev = document.createEvent('HtmlEvents')
                // ev.initEvent('事件类型',是否允许冒泡,是否允许阻止默认行为)
                ev.initEvent('change', true, true)
                // 元素.dispatchEvent(自定义事件对象)
                city.dispatchEvent(ev)
                setTimeout(()=>{
                    county.value = obj.county

                },200)
            },300)

        })
    }
})